<template>
<div>
  <a-select
    v-if="type === 'select'"
    :value="value"
    @change="input"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <a-select-option
      v-for="(item, index) in Object.entries(enums)"
      :key="index"
      :value="getValue(item[0])"
      allowClear
      
    >
    {{item[1]}}
    </a-select-option>
  </a-select>
  <a-radio-group name="radioGroup" v-else-if="type==='radio'" :value="value" v-bind="$attrs" @input="selectChange" v-on="$listeners">
    <a-radio   v-for="(item, index) in Object.entries(enums)"
      :key="index"
      :value="getValue(item[0])">
      {{item[1]}}
    </a-radio>
  </a-radio-group>
  <a-checkbox-group v-else :value="value" v-bind="$attrs" @input="selectChange" v-on="$listeners">
        <a-checkbox  :name="item[1]" v-for="(item, index) in Object.entries(enums)" :key="index"
      :value="getValue(item[0])">
      {{item[1]}}
        </a-checkbox>
  </a-checkbox-group>
  </div>
</template>

<script>
export default {
  props: {
    value: [Object, Number, String, Boolean, Array],
    enums: {
      type: Object,
      require:true
    },
    type: {
      type: String,
      default: 'select',
    },
    valueIsNumber: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      
    }
  },
  methods: {
    getValue(val) {
      if (Number.isNaN(Number(val))) {
        return val
      }
      return this.valueIsNumber ? Number(val) : val
    },
     input(e) {
       console.log('e',e)
      this.$emit('input', e);
    },
    selectChange(e){
       this.$emit('input', e);
    },
  },
}
</script>

<style></style>
